<template>
  <el-collapse-transition>
    <vue-drag-resize :isActive="true" :isDraggable="false" :sticks="['tm']" class="query-tabs" h="480"
      v-if="columnDataChecked.length > 0" :preventActiveBehavior="true">
      <el-card>
        <el-link :underline="false" class="query-tabs-close" @click="closeTable"><el-icon>
            <CloseBold />
          </el-icon></el-link>
        <el-tabs v-model="activeTab" @tab-change="queryList">
          <el-tab-pane label="未质检" name="0">
            <el-row :gutter="10" class="mb8" style="float:left">
              <el-col :span="1.5">
                <el-button type="primary" icon="Download" @click="handleExport">下载</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="primary" icon="Delete" @click="handleDelete">删除</el-button>
              </el-col>
              <el-col :span="1.5" v-if="isNeedQuality(queryForm.typeCode)">
                <el-button type="primary" icon="EditPen" @click="handleQualityTesting">提交质检</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="primary" icon="Setting" @click="handleColumn">列设置</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="tableLoading" :data="queryTable" :border="true" @selection-change="tableChange" stripe
              v-if="columnDataChecked.length > 0" max-height="300">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column v-for="(item, index) in columnDataChecked" :key="item.fieldName" :label="item.name"
                :prop="item.fieldName" align="center" :min-width="minWidthSet(item.name)">
                <template #default="{ row }">
                  <el-link v-if="index == '0'" :underline="false" type="primary" @click="getFormDetail(row)">{{
                    row[item.fieldName] }}</el-link>
                  <el-button v-if="/Aiid|Arwid|Acid|Arid/.test(item.fieldName)" type="text"
                    @click="getFormDetail(row)">修改</el-button>
                </template>
                <template #default="{ row }" v-if="checkDict(item.fieldName, queryForm.typeCode)">
                  <dict-tag :value="row[item.fieldName]" :code="checkDict(item.fieldName, queryForm.typeCode)"></dict-tag>
                </template>
              </el-table-column>
            </el-table>

            <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryForm.page"
              v-model:limit="queryForm.rows" @pagination="queryList" />
          </el-tab-pane>
          <el-tab-pane label="质检不通过" name="2">
            <el-row :gutter="10" class="mb8" style="float:left">
              <el-col :span="1.5">
                <el-button type="primary" icon="Download" @click="handleExport">下载</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="primary" icon="Delete" @click="handleDelete">删除</el-button>
              </el-col>
              <el-col :span="1.5" v-if="isNeedQuality(queryForm.typeCode)">
                <el-button type="primary" icon="EditPen" @click="handleQualityTesting">提交质检</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="primary" icon="Setting" @click="handleColumn">列设置</el-button>
              </el-col>
            </el-row>

            <el-table v-loading="tableLoading" :data="queryTable" :border="true" @selection-change="tableChange" stripe
              v-if="columnDataChecked.length > 0" max-height="300">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column v-for="(item, index) in columnDataChecked" :key="item.fieldName" :label="item.name"
                :prop="item.fieldName" align="center" :min-width="minWidthSet(item.name)">
                <template #default="{ row }">
                  <el-link v-if="index == '0'" :underline="false" type="primary" @click="getFormDetail(row)">{{
                    row[item.fieldName] }}</el-link>
                  <el-button v-if="/Aiid|Arwid|Acid|Arid/.test(item.fieldName)" type="text"
                    @click="getFormDetail(row)">修改</el-button>
                </template>
                <template #default="{ row }" v-if="checkDict(item.fieldName, queryForm.typeCode)">
                  <dict-tag :value="row[item.fieldName]" :code="checkDict(item.fieldName, queryForm.typeCode)"></dict-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template #default="{ row }">
                  <el-link type="primary" :underline="false" @click="viewQuality(row)">查看理由</el-link>
                  <el-link type="primary" :underline="false"
                    @click="quality(row[getDetailId(queryForm.typeCode)])">提交质检</el-link>
                </template>
              </el-table-column>
            </el-table>

            <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryForm.page"
              v-model:limit="queryForm.rows" @pagination="queryList" />
          </el-tab-pane>
          <el-tab-pane label="质检通过" name="3">
            <el-row :gutter="10" class="mb8" style="float:left">
              <el-col :span="1.5">
                <el-button type="primary" icon="Download" @click="handleExport">下载</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="primary" icon="Delete" @click="handleDelete">删除</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="primary" icon="Setting" @click="handleColumn">列设置</el-button>
              </el-col>
            </el-row>

            <el-table v-loading="tableLoading" :data="queryTable" :border="true" @selection-change="tableChange" stripe
              v-if="columnDataChecked.length > 0" max-height="300">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column v-for="(item, index) in columnDataChecked" :key="item.fieldName" :label="item.name"
                :prop="item.fieldName" align="center" :min-width="minWidthSet(item.name)">
                <template #default="{ row }">
                  <el-link v-if="index == '0'" :underline="false" type="primary" @click="getFormDetail(row)">{{
                    row[item.fieldName] }}</el-link>
                  <el-button v-if="/Aiid|Arwid|Acid|Arid/.test(item.fieldName)" type="text"
                    @click="getFormDetail(row)">修改</el-button>
                </template>
                <template #default="{ row }" v-if="checkDict(item.fieldName, queryForm.typeCode)">
                  <dict-tag :value="row[item.fieldName]" :code="checkDict(item.fieldName, queryForm.typeCode)"></dict-tag>
                </template>
              </el-table-column>
            </el-table>

            <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryForm.page"
              v-model:limit="queryForm.rows" @pagination="queryList" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </vue-drag-resize>
  </el-collapse-transition>
  <ColumnSetting ref="columnRef" v-model:open="columnSetting.open" :title="columnSetting.title" :columnData="columnData"
    @saveColumn="saveColumn"></ColumnSetting>
  <Quality v-model:open="qualityOpen" :data="qualityData" />
</template>
<script setup>
import ColumnSetting from '@/components/ColumnSetting'
import { checkDict } from '@/views/businessManage/common/dict'
import { isNeedQuality } from '@/views/businessManage/common/intergrateTree'
import { minWidthSet } from '@/views/businessManage/common/minWidth'
import { getDetailId } from '@/views/businessManage/common/formDetail'
import { getField, getAll, fieldOption, deleteList, submit } from '@/api/businessManage/dataLoader/spatialData'
import { ElMessageBox } from 'element-plus'
import Quality from '@/views/businessManage/common/quality'

const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const props = defineProps({
  queryForm: Object,
  codeTypeName: String
})
const emits = defineEmits(['selectIServerId', 'iServerPosition'])
const { queryForm } = props
const queryData = reactive({
  activeTab: '0',
  total: 0,
  tableLoading: false,
  queryTable: [],
  columnData: [],
  columnDataChecked: []
})
const { activeTab, total, tableLoading, queryTable, columnData, columnDataChecked } = toRefs(queryData)

const queryList = () => {
  tableLoading.value = true
  queryTable.value = []
  getField(queryForm.typeCode).then(res => {
    columnData.value = res.data
    columnDataChecked.value = res.data.filter(item => item.status == '1')
    getAll(queryForm.typeCode, { ...queryForm, qcFlag: activeTab.value, smId: route.query.id }).then(res => {
      tableLoading.value = false
      queryTable.value = res.data.rows
      emits('selectIServerId', res.data.rows)
      total.value = res.data.total
    }).catch(err => {
      tableLoading.value = false
    })
  }).catch(err => {
    tableLoading.value = false
  })
}
const closeTable = () => {
  columnDataChecked.value = []
  emits('selectIServerId', [])
}
const ids = ref([])
const tableChange = (val) => {
  let idName = getDetailId(queryForm.typeCode)
  ids.value = val.map(item => item[idName])
}
// 下载
const handleExport = () => {
  proxy.download(`/modules/${props.queryForm.typeCode}/downLoadShp`, queryForm, `${props.codeTypeName}.zip`)
}
// 删除
const handleDelete = () => {
  if (ids.value.length == 0) {
    proxy.$modal.msgWarning('请至少选择一条数据！')
    return
  }
  ElMessageBox.confirm('是否确定删除？', "系统提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    cancelButtonClass: 'is-plain',
    type: "warning",
    cancelButtonClass: 'is-plain'
  }).then(() => {
    return deleteList(queryForm.typeCode, ids.value)
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功！')
    queryList()
  })
}
// 查看理由
const qualityOpen = ref(false)
const qualityData = ref({})
const viewQuality = (row) => {
  qualityOpen.value = true
  qualityData.value = row
}
// 提交质检
const handleQualityTesting = () => {
  if (ids.value.length == 0) {
    proxy.$modal.msgWarning('请至少选择一条数据！')
    return
  }
  quality(ids.value)
}
const quality = (ids) => {
  submit(queryForm.typeCode, ids).then(res => {
    proxy.$modal.msgSuccess('提交质检成功！')
    queryList()
  })
}
// 提交列设置
const columnSetting = reactive({
  open: false,
  title: props.codeTypeName
})
const handleColumn = () => {
  columnSetting.open = true
}
// 保存列设置
const saveColumn = (data) => {
  fieldOption(queryForm.typeCode, data).then(res => {
    proxy.$modal.msgSuccess('保存成功！')
    columnSetting.open = false
    queryList()
  })
}

const getFormDetail = (row) => {
  emits('iServerPosition', row.geom)
  let idName = getDetailId(queryForm.typeCode)
  let path = `/businessManage/dataLoader/subject/spatialData/${queryForm.typeCode}`
  if (route.name == 'main') {
    path = `/businessManage/dataIntegrate/main/${queryForm.typeCode}`
    router.push({ path, query: { ...route.query, detailId: row[idName], typeName: props.codeTypeName } })
  }
  router.push({ path, query: { ...route.query, detailId: row[idName], typeName: props.codeTypeName } })
}

watch(columnDataChecked, () => {
  if (columnDataChecked.value.length == 0) {
    activeTab.value = '0'
  }
})

watch(() => route, () => {
  if (route.name == 'spatialData' && queryForm.typeCode) {
    queryList()
  }
}, { immediate: true, deep: true })

defineExpose({
  columnDataChecked,
  queryList
})
</script>
<style scoped lang="scss">
.query-tabs {
  position: absolute;
  bottom: 5px !important;
  width: calc(100% - 10px);
  z-index: 10 !important;
  margin: 0 5px;
  top: unset !important;
  max-height: 90%;

  :deep(.content-container) {
    width: 100% !important;

    .el-card,
    .el-card__body {
      height: 100%;
    }
  }

  &-close {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
  }
}
</style>